<template>
  <div class="my-image-wrapper">
    <div
      @click="review(item)"
      :key="index"
      class="my-image"
      v-for="(item, index) of list"
    >
      <img :src="item" v-bind="$attrs" />
    </div>
    <el-dialog
      :show-close="false"
      :visible.sync="visible"
      append-to-body
      class="img-dialog"
      width="600px"
      v-if="visible"
    >
      <img :src="showSrc" width="100%" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "my-image",
  props: {
    src: {
      type: [String, Array],
      default: ""
    },
    separator: {
      type: String,
      default: ","
    }
  },
  data() {
    return {
      visible: false,
      showSrc: ""
    };
  },
  computed: {
    list() {
      const { src } = this;
      let ret;
      if (!src) ret = [];
      if (typeof src === "string") ret = src.split(this.separator);
      if (Array.isArray(src)) ret = src;
      return ret;
    }
  },
  methods: {
    review(src) {
      this.showSrc = src;
      this.visible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.my-image-wrapper {
  .my-image {
    position: relative;
    display: inline-block;
    cursor: pointer;
    img {
      display: block;
      // max-width: 100px;
      max-height: 100px;
    }
  }
  .my-image + .my-image {
    margin-left: 10px;
  }
}
</style>
